<template>
  <view class="content">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :bottomShadow="false" backgroundColor="#020303">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-center">
        <view class="navbar-title">完善资料</view>
      </view>
    </tn-nav-bar>

    <view class="container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 进度条 -->
      <view class="header">
        <view class="progress-container">
          <view class="progress-bar">
            <view class="progress-fill" :style="{width: `${(currentStep / totalSteps) * 100}%`}"></view>
          </view>
          <view class="progress-steps">
            <view
              v-for="(step, index) in totalSteps"
              :key="index"
              class="step"
              :class="[index < currentStep ? 'completed' : '', index === currentStep - 1 ? 'active' : '']"
              @tap="handleStepClick(index + 1)"
            >
              <text>{{index + 1}}</text>
              <text class="step-label">{{ stepLabels[index] }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 表单内容区域 - 将根据currentStep显示不同表单 -->
      <view class="setup-form">
        <!-- 第一步：头像和昵称 -->
        <template v-if="currentStep === 1">
          <!-- 添加过渡区域 -->
          <view class="step-transition"></view>

          <!-- 头像上传 - 改进版 -->
          <view class="avatar-section">
            <view class="avatar-upload-improved" @tap="chooseAvatar">
              <view v-if="!formData.avatar" class="avatar-placeholder-improved">
                <text class="tn-icon-camera"></text>
                <text class="upload-hint">上传头像</text>
              </view>
              <image v-else :src="formData.avatar" mode="aspectFill"></image>
              <view class="avatar-overlay-improved">
                <text class="tn-icon-camera"></text>
              </view>
            </view>
            <text v-if="errors.avatar" class="avatar-error">{{ errors.avatar }}</text>
          </view>

          <!-- 昵称输入 - 改进版 -->
          <view class="form-group-improved">
            <view class="form-label-improved">
              <text>昵称</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper-improved" :class="{ error: errors.nickname, focused: inputFocus === 'nickname' }" @tap="focusInput('nickname')">
              <text class="input-icon tn-icon-my-fill"></text>
              <tn-input
                type="text"
                v-model="formData.nickname"
                placeholder="请输入昵称"
                maxlength="12"
                class="nickname-input"
                :focus="inputFocus === 'nickname'"
                @blur="inputFocus = ''"
              />
              <view class="input-counter" v-if="formData.nickname.length > 0">{{formData.nickname.length}}/12</view>
            </view>
            <view v-if="errors.nickname" class="form-error">{{ errors.nickname }}</view>
          </view>

          <!-- 性别选择 - 改进版 -->
          <view class="form-group-improved">
            <view class="form-label-improved">
              <text>性别</text>
              <text class="required">*</text>
              <text class="warning-improved">提交后不可修改</text>
            </view>
            <view class="gender-options-improved">
              <view
                class="gender-option-improved"
                :class="{ active: formData.gender === 'male' }"
                @tap="formData.gender = 'male'"
              >
                <text class="gender-icon tn-icon-boy"></text>
                <text>男生</text>
              </view>
              <view
                class="gender-option-improved"
                :class="{ active: formData.gender === 'female' }"
                @tap="formData.gender = 'female'"
              >
                <text class="gender-icon tn-icon-girl"></text>
                <text>女生</text>
              </view>
            </view>
            <view v-if="errors.gender" class="form-error">{{ errors.gender }}</view>
          </view>

          <!-- 生日选择 - 改进版 -->
          <view class="form-group-improved">
            <view class="form-label-improved">
              <text>生日</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper-improved" :class="{ error: errors.birthday, focused: inputFocus === 'birthday' }" @tap="openBirthdayPicker">
              <text class="input-icon tn-icon-calendar"></text>
              <view class="birthday-text">
                <text v-if="formData.birthday">{{ formData.birthday }}</text>
                <text v-else class="birthday-placeholder">请选择您的生日</text>
              </view>
              <text class="input-icon tn-icon-right" style="color: #888; margin-right: 32rpx;"></text>
            </view>
            <view v-if="errors.birthday" class="form-error">{{ errors.birthday }}</view>
          </view>

          <!-- 微信号输入 - 仅在非审核模式下显示 -->
          <view class="form-group-improved" v-if="!wxAuditMode">
            <view class="form-label-improved">
              <text>微信号</text>
              <!-- 移除必填标记 -->
            </view>
            <view class="input-wrapper-improved" :class="{ error: errors.wechat, focused: inputFocus === 'wechat' }" @tap="focusInput('wechat')">
              <text class="input-icon tn-icon-wechat-fill"></text>
              <tn-input
                type="text"
                v-model="formData.wechat"
                placeholder="请输入您的微信号"
                maxlength="30"
                class="wechat-input"
                :focus="inputFocus === 'wechat'"
                @blur="inputFocus = ''"
              />
              <view class="input-counter" v-if="formData.wechat.length > 0">{{formData.wechat.length}}/30</view>
            </view>
            <view v-if="errors.wechat" class="form-error">{{ errors.wechat }}</view>
          </view>

          <!-- 好友添加设置 - 新增 -->
          <view class="form-group-improved">
            <view class="form-label-improved">
              <text>好友添加设置</text>
            </view>
            <view class="friend-permission-options">
              <view class="permission-option-desc">
                <text>允许通过资料卡或帖子添加好友</text>
              </view>
              <tn-switch
                v-model="formData.allowFriendAdd"
                activeColor="#B3F73C"
                :buttonColor="formData.allowFriendAdd ? '#FFFFFF' : '#888888'"
                @change="onFriendPermissionChange"
              ></tn-switch>
            </view>
            <view class="friend-permission-tips" v-if="formData.allowFriendAdd">
              <text class="tn-icon-info-fill"></text>
              <text>他人可以通过您的资料卡或帖子直接添加您为好友</text>
            </view>
            <view class="friend-permission-tips" v-else>
              <text class="tn-icon-info-fill"></text>
              <text>他人将无法通过您的资料卡或帖子添加您为好友</text>
            </view>
          </view>
        </template>

        <!-- 第二步：上传相册 (替换个人简介) -->
        <template v-if="currentStep === 2">
          <!-- 添加过渡区域 -->
          <view class="step-transition"></view>

          <!-- 相册上传区域 -->
          <view class="album-upload-area">
            <view class="album-grid">
              <view
                v-for="(photo, index) in formData.album"
                :key="index"
                class="album-item"
              >
                <image :src="photo" mode="aspectFill"></image>
                <view class="delete-btn" @tap.stop="deletePhoto(index)">
                  <text class="tn-icon-close"></text>
                </view>
              </view>

              <!-- 添加照片按钮 -->
              <view class="album-item add-photo" @tap="choosePhotos" v-if="formData.album.length < 9">
                <text class="tn-icon-add"></text>
                <text class="add-text">添加照片</text>
              </view>
            </view>
            <view v-if="errors.album" class="form-error album-error">{{ errors.album }}</view>
          </view>

          <view class="album-tips">
            <view class="tip-item">
              <text class="tn-icon-info-fill"></text>
              <text>最多可上传9张照片</text>
            </view>
            <view class="tip-item">
              <text class="tn-icon-info-fill"></text>
              <text>请上传清晰、真实的照片</text>
            </view>
            <view class="tip-item">
              <text class="tn-icon-info-fill"></text>
              <text>优质照片可进入推荐哦</text>
            </view>
          </view>
        </template>

        <!-- 第三步：个人介绍 (替换兴趣爱好) -->
        <template v-if="currentStep === 3">
          <!-- 添加过渡区域 -->
          <view class="step-transition"></view>

          <!-- 个人介绍选择 - 使用tn-select实现 -->
          <view class="form-group">
            <view class="form-label">
              <text>选择介绍模板</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper dropdown-wrapper" :class="{ error: errors.introduction }" @tap="openIntroductionSelect">
              <text class="input-icon tn-icon-edit"></text>
              <view class="intro-text">
                <text v-if="formData.introduction">{{ getIntroductionText() }}</text>
                <text v-else class="intro-placeholder">请选择个人介绍</text>
              </view>
              <text class="input-icon tn-icon-down" style="color: #888; margin-right: 32rpx;"></text>
            </view>
            <view v-if="errors.introduction" class="form-error">{{ errors.introduction }}</view>
          </view>

          <view class="intro-tips">
            <view class="tip-item">
              <text class="tn-icon-info-fill"></text>
              <text>一个好的个人介绍可以更好地展示你的魅力</text>
            </view>
            <view class="tip-item">
              <text class="tn-icon-info-fill"></text>
              <text>选择一个最能代表你个性的介绍</text>
            </view>
            <view class="tip-item">
              <text class="tn-icon-wand"></text>
              <text class="random-intro-btn" @tap="randomSelectIntroduction">随机生成介绍</text>
            </view>
          </view>
        </template>

        <!-- 第四步：兴趣爱好 -->
        <template v-if="currentStep === 4">
          <!-- 添加过渡区域 -->
          <view class="step-transition"></view>

          <!-- 兴趣爱好选择 -->
          <view class="interests-container">
            <view class="section-title">兴趣标签</view>
            <view class="tag-cloud">
              <view
                v-for="tag in interestTags"
                :key="tag.id"
                class="tag-item"
                :class="{ active: isInterestSelected(tag.id) }"
                @tap="toggleInterest(tag.id, tag.name)"
              >{{ tag.name }}</view>
            </view>

            <view v-if="errors.interests" class="form-error interests-error">{{ errors.interests }}</view>
            <view class="interests-tip">最多可选择5个标签，请至少选择1个标签</view>
          </view>

          <!-- 隐私政策 -->
          <view class="custom-checkbox">
            <view
              class="checkbox-icon"
              :class="{'checked': privacyAgreed}"
              @tap="togglePrivacyAgreed"
            >
              <text v-if="privacyAgreed" class="tn-icon-check"></text>
            </view>
            <view class="checkbox-content" @tap="togglePrivacyAgreed">
              <text class="privacy-text">我已阅读并同意</text>
              <text class="privacy-link" @tap.stop="showUserAgreement">《用户协议》</text>
              <text class="privacy-text">和</text>
              <text class="privacy-link" @tap.stop="showPrivacyPolicy">《隐私政策》</text>
            </view>
          </view>

          <!-- 完成提示 -->
          <view class="completion-info">
            <view class="completion-icon">
              <text class="tn-icon-flag-fill"></text>
            </view>
            <view class="completion-text">
              填写完成后，你的用户资料将完成初始化，可以开始探索平台更多功能！
            </view>
          </view>
        </template>
      </view>

      <!-- 底部按钮区域 -->
      <view class="action-buttons">
        <view class="reward-badge" v-if="currentStep <= totalSteps">
          <text class="tn-icon-money-fill"></text>
          <text>完成当前步骤可获得</text>
          <text>{{ stepRewards[currentStep - 1].min }}-{{ stepRewards[currentStep - 1].max }}</text>
          <text>金币</text>
        </view>
        <view class="action-row">
          <view
            class="btn btn-skip"
            @tap="showSkipTip"
            v-if="currentStep > 1 && currentStep < totalSteps && currentStep !== 2"
          >跳过</view>
          <view
            class="btn btn-next"
            :class="{'btn-disabled': !canGoNext}"
            @tap="handleNextStep()"
          >{{ currentStep === totalSteps ? '完成' : '下一步' }}</view>
        </view>
      </view>
    </view>

    <!-- 添加生日日期选择器 -->
    <tn-picker
      v-model="showBirthdayPicker"
      mode="time"
      :params="{
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      }"
      :defaultTime="formData.birthday || '1994-07-18'"
      :startYear="1950"
      :endYear="maxBirthYear"
      @confirm="onBirthdayConfirm"
      title="选择生日"
      cancelColor="#888888"
      confirmColor="#6c5ce7"
      titleColor="#FFFFFF"
    />

    <!-- 奖励动画组件 -->
    <view class="reward-animation" v-if="showRewardAnimation">
      <view class="reward-card-container">
        <view class="reward-card" :class="{'flipped': isCardFlipped}">
          <!-- 卡片正面 -->
          <view class="reward-card-front">
            <view class="card-pattern">
              <text class="tn-icon-questionmark questionmark-icon"></text>
            </view>
            <text class="card-front-text">奖励即将揭晓</text>
          </view>

          <!-- 卡片背面 -->
          <view class="reward-card-back">
            <view class="reward-type coins">
              <text class="tn-icon-money-fill"></text>
            </view>
            <view class="reward-amount">+{{currentReward.amount}}</view>
            <view class="reward-name">{{currentReward.name}}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 替换原来的个人介绍选择器弹窗 -->
    <!-- 使用tn-select实现个人介绍选择器 -->
    <tn-select
      ref="introductionSelect"
      v-model="showIntroSelect"
      mode="single"
      :list="formattedIntroductionOptions"
      :defaultValue="[introductionSelectIndex]"
      valueName="id"
      labelName="text"
      title="选择个人介绍"
      cancelColor="#888888"
      confirmColor="#B3F73C"
      titleColor="#FFFFFF"
      :showSearch="true"
      @confirm="onIntroductionConfirm"
      @cancel="showIntroSelect = false"
      @columnChange="onIntroductionColumnChange"
    >
      <template v-slot:header>
        <view class="custom-select-header">
          <view class="header-cancel" @tap="showIntroSelect = false">取消</view>
          <view class="header-title">选择个人介绍</view>
          <view class="header-confirm" @tap="onSelectConfirmClick">确定</view>
        </view>
      </template>
    </tn-select>

    <!-- 跳过确认提示 -->
    <view class="skip-tip-overlay" v-if="showSkipTipDialog" @tap="showSkipTipDialog = false">
      <view class="skip-tip-card" @tap.stop>
        <view class="skip-tip-header">
          <text class="skip-tip-title">确定跳过吗？</text>
          <view class="skip-tip-close-btn" @tap="showSkipTipDialog = false">
            <text class="tn-icon-close"></text>
          </view>
        </view>
        <view class="skip-tip-content">
          <view class="skip-tip-reward">
            <view class="skip-tip-reward-circle">
              <text class="tn-icon-money-fill"></text>
            </view>
            <view class="skip-tip-reward-info">
              <text class="skip-tip-reward-label">完成当前步骤可获得</text>
              <text class="skip-tip-reward-amount">{{ stepRewards[currentStep - 1].min }}-{{ stepRewards[currentStep - 1].max }}金币</text>
            </view>
          </view>
          <view class="skip-tip-warning">
            <text class="tn-icon-warning-fill"></text>
            <text>跳过此步骤将无法获得上述奖励</text>
          </view>
        </view>
        <view class="skip-tip-actions">
          <view class="skip-tip-btn skip-cancel" @tap="confirmSkip">跳过</view>
          <view class="skip-tip-btn skip-confirm" @tap="showSkipTipDialog = false">
            继续完成
            <text class="tn-icon-right"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加订阅消息组件 -->
    <ProfileSubscribe
      :show.sync="showSubscribe"
      @success="onSubscribeComplete"
    />
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { mapState, mapActions, mapGetters } from 'vuex';
import * as uploadAPI from '@/api/upload/index.js';
import API from '@/api/index.js';
import { getIntroductionTemplates } from '@/api/user/index.js';
// 导入订阅相关工具
import ProfileSubscribe from '@/components/subscribe/profile/index.vue'; // 导入订阅消息组件
import SubscribeManager, { STORAGE_KEYS } from '@/utils/subscribe-manager.js'; // 导入订阅管理工具类

export default {
  name: 'ProfileSetup',
  mixins: [template_page_mixin],
  components: {
    // ... existing components ...
    ProfileSubscribe, // 注册资料订阅消息组件
  },
  data() {
    return {
      // 计算18岁的年份限制
      maxBirthYear: new Date().getFullYear() - 18,
      // 步骤相关
      currentStep: 1,
      totalSteps: 4,
      stepLabels: ['基本信息', '个人相册', '个人介绍', '兴趣标签'],
      completedSteps: 0,

      // 每一步的奖励金币范围
      stepRewards: [
        { min: 40, max: 60 },  // 步骤1：基本信息
        { min: 50, max: 70 },  // 步骤2：个人相册
        { min: 30, max: 50 },  // 步骤3：个人介绍
        { min: 60, max: 80 },  // 步骤4：兴趣爱好
      ],

      // 每一步的奖励金币数
      currentStepReward: 50,

      // 奖励动画相关
      showRewardAnimation: false,
      isCardFlipped: false,
      currentReward: {
        type: 'coins',
        amount: 50,
        name: '金币'
      },
      // 移除其他奖励类型，只保留金币
      rewardTypes: [
        { type: 'coins', name: '金币', minAmount: 40, maxAmount: 60 }
      ],
      rewardIcons: {
        'coins': 'tn-icon-money-fill'
      },

      // 表单数据
      formData: {
        avatar: '',
        nickname: '',
        gender: '',
        birthday: '',
        bio: '',
        album: [], // 新增：存储相册照片的数组
        interests: [], // 改为存储标签ID
        introduction: '', // 个人介绍选项
        contact: '',
        albumVisibility: 'public',
        wechat: '', // 新增：微信号
        allowFriendAdd: true, // 新增：是否允许通过资料卡或帖子添加好友
      },

      // 错误信息
      errors: {
        avatar: '',
        nickname: '',
        gender: '',
        birthday: '',
        bio: '',
        album: '',
        interests: '',
        introduction: '',
        wechat: '', // 新增：微信号错误信息
      },

      // 新增：个人介绍模板选项
      introductionOptions: [],

      // 联系方式相关
      contactType: 'phone',
      contactLabels: {
        phone: '手机号',
        wechat: '微信号',
        qq: 'QQ号'
      },
      contactPlaceholders: {
        phone: '请输入手机号码',
        wechat: '请输入微信号',
        qq: '请输入QQ号码'
      },
      privacyAgreed: false,

      // 标签数据
      gameTypes: [],
      hobbyTypes: [],
      personalityTypes: [],

      // 简化标签数据结构，只需要一个数组即可
      interestTags: [],

      // 添加：标签ID到标签对象的映射，方便快速查找
      tagMap: {},

      // 新增：用于自定义组件交互的变量
      inputFocus: '',
      textareaFocus: '',
      isSliding: false,
      sliderWidth: 0,
      sliderOffsetLeft: 0,
      showBirthdayPicker: false,
      showSkipTipDialog: false, // 控制跳过提示显示
      showIntroSelect: false,
      introductionSelectIndex: 0,
      // 添加表单提交状态
      isSubmitting: false,
      // 添加头像上传状态
      isUploading: false,
      // 添加相册照片上传状态跟踪
      photoUploading: false,
      photoUploadQueue: 0,
      showSubscribe: false, // 控制订阅消息弹窗显示
    }
  },
  computed: {
    // 是否可以进行下一步
    canGoNext() {
      if (this.currentStep === 1) {
        return this.formData.avatar && this.formData.nickname && this.formData.gender && this.formData.birthday;
      } else if (this.currentStep === 2) {
        return this.formData.album.length > 0; // 至少上传一张照片
      } else if (this.currentStep === 3) {
        return this.formData.introduction !== '';
      } else if (this.currentStep === 4) {
        return this.formData.interests.length >= 1 && this.privacyAgreed;
      }
      return true;
    },
    // 添加格式化介绍选项计算属性
    formattedIntroductionOptions() {
      return this.introductionOptions.map(item => ({
        id: item.id,
        text: item.text
      }));
    },
    // 过滤后的介绍选项计算属性
    filteredIntroductionOptions() {
      if (!this.introSearchKeyword) {
        return this.formattedIntroductionOptions;
      }

      const keyword = this.introSearchKeyword.toLowerCase();
      return this.formattedIntroductionOptions.filter(item =>
        item.text.toLowerCase().includes(keyword)
      );
    },
    ...mapState('user', ['userInfo']),
    ...mapGetters('config', ['wxAuditMode']),
  },
  onLoad() {
    // 页面加载时可以初始化一些数据
    // 例如，可以从服务器获取用户已有的资料信息
    // 这里使用模拟数据作为示例
    this.initWithDemoData();

    // 初始化随机奖励金币数量
    this.generateRandomReward();

    // 添加：调用获取标签数据的方法
    this.fetchTagList();

    // 获取介绍模板
    this.fetchIntroductionTemplates();
  },
  // 添加onShow生命周期函数
  onShow() {
    // #ifdef MP-WEIXIN
    // 使用SubscribeManager检查从设置页面返回状态
    SubscribeManager.checkFromSettingReturn(
      // 成功回调 - 用户已授权并接受订阅
      (result) => {
        this.submitForm(true);
      },
      // 失败回调 - 用户未授权或拒绝订阅
      () => {
        // 如果仍未订阅，继续提示
        this.continueSubscribeGuide();
      },
      // 传递必要的参数
      'POST_ALL',
      STORAGE_KEYS.POST.SUBSCRIBED,
      STORAGE_KEYS.POST.SUBSCRIBE_TIME,
      STORAGE_KEYS.POST.LAST_PROMPT
    );
    // #endif
  },
  watch: {
    // 监听步骤变化，每次步骤变化时生成新的随机奖励
    currentStep() {
      this.generateRandomReward();
    }
  },
  methods: {
    // 添加Vuex actions映射
    ...mapActions('user', ['submitUserProfileForAudit', 'updateUserProfile', 'getProfileAuditStatus']),

    // 生成随机奖励金币数量
    generateRandomReward() {
      // 获取当前步骤的奖励范围
      const currentRewardRange = this.stepRewards[this.currentStep - 1];
      const min = currentRewardRange.min;
      const max = currentRewardRange.max;

      // 在当前步骤的奖励范围内生成随机数
      this.currentStepReward = Math.floor(Math.random() * (max - min + 1)) + min;
    },

    // 初始化示例数据
    initWithDemoData() {
      // 这里可以从服务器获取用户的资料信息
      // 如果已经设置过，可以进行展示
      // 不再设置默认头像，由用户自行上传
    },

    // 修改选择头像为异步函数，并调用上传接口
    async chooseAvatar() {
      // 如果正在上传，不允许重复选择
      if (this.isUploading) {
        return;
      }

      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];

          // 调用上传图片方法
          this.uploadAvatar(tempFilePath);
        }
      });
    },

    // 新增上传头像方法
    async uploadAvatar(filePath) {
      this.isUploading = true;

      try {
        // 调用上传文件API
        const imageUrl = await uploadAPI.uploadFile({
          filePath: filePath,
          fileType: 'avatar',
          onProgress: (progress) => {
            console.log('头像上传进度:', progress);
          }
        });

        // 上传成功，设置头像URL为服务器返回的URL
        this.formData.avatar = imageUrl;
        this.errors.avatar = '';

        console.log('头像上传成功:', imageUrl);
      } catch (error) {
        console.error('头像上传失败:', error);
        // 即使上传失败，也使用本地路径作为临时显示
        this.formData.avatar = filePath;
      } finally {
        this.isUploading = false;
      }
    },
	
	// 添加继续引导订阅的方法
	continueSubscribeGuide() {
	  SubscribeManager.showSubscribeGuide((subscribed) => {
	    // 如果仍未订阅，onShow会再次触发处理
	  });
	},

    // 修改选择照片方法
    choosePhotos() {
      const maxCount = 9 - this.formData.album.length; // 计算还能选择的数量

      if (maxCount <= 0) {
        uni.showToast({
          title: '最多只能上传9张照片',
          icon: 'none'
        });
        return;
      }

      uni.chooseImage({
        count: maxCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 依次上传选择的每张图片
          const tempFilePaths = res.tempFilePaths;
          tempFilePaths.forEach(filePath => {
            this.uploadPhoto(filePath);
          });
        }
      });
    },

    // 新增上传照片方法
    async uploadPhoto(filePath) {
      try {
        // 增加上传队列计数
        this.photoUploadQueue++;
        // 设置上传中状态
        this.photoUploading = true;

        // 先使用本地路径添加到相册（用于界面立即显示）
        const localIndex = this.formData.album.length;
        this.formData.album.push(filePath);

        // 调用上传文件API
        const imageUrl = await uploadAPI.uploadFile({
          filePath: filePath,
          fileType: 'image',
          onProgress: (progress) => {
            console.log('照片上传进度:', progress);
          }
        });

        // 上传成功，替换为服务器URL
        if (localIndex < this.formData.album.length) {
          this.formData.album[localIndex] = imageUrl;
        }

        console.log('照片上传成功:', imageUrl);
        this.errors.album = '';
      } catch (error) {
        console.error('照片上传失败:', error);
        // 上传失败显示提示
        uni.showToast({
          title: '照片上传失败，请重试',
          icon: 'none'
        });
      } finally {
        // 减少上传队列计数
        this.photoUploadQueue--;
        // 如果队列为空，设置上传完成状态
        if (this.photoUploadQueue <= 0) {
          this.photoUploading = false;
          this.photoUploadQueue = 0;
        }
      }
    },

    // 删除照片
    deletePhoto(index) {
      // 获取要删除的照片URL
      const photoUrl = this.formData.album[index];

      // 从数组中删除照片
      this.formData.album.splice(index, 1);

      // 如果我们有存储相册审核ID，可以在这里处理相关清理
      // 但由于后端没有提供取消审核的接口，这里只记录日志
      console.log('已从前端删除照片:', photoUrl);
      // 注意：已提交审核的照片在后端仍然存在，只是不再显示在前端
    },

    // 切换兴趣标签
    toggleInterest(tagId, tagName) {
      const index = this.formData.interests.indexOf(tagId);

      if (index === -1) {
        // 限制最多选择5个标签
        if (this.formData.interests.length >= 5) {
          uni.showToast({
            title: '最多选择5个标签',
            icon: 'none'
          });
          return;
        }
        this.formData.interests.push(tagId);

        // 更新标签的选中状态
        const tag = this.interestTags.find(t => t.id === tagId);
        if (tag) {
          tag.selected = true;
        }
      } else {
        this.formData.interests.splice(index, 1);

        // 更新标签的选中状态
        const tag = this.interestTags.find(t => t.id === tagId);
        if (tag) {
          tag.selected = false;
        }
      }

      this.errors.interests = '';
    },

    // 检查标签是否被选中
    isInterestSelected(tagId) {
      return this.formData.interests.includes(tagId);
    },

    // 隐私政策变更
    onPrivacyChange(e) {
      this.privacyAgreed = e.detail.value.length > 0;
    },

    // 隐私政策变更 - 保留此方法但修改实现，当触发togglePrivacyAgreed时会被调用
    onPrivacyChange() {
      // 这个方法保留是为了兼容可能存在的引用，实际实现已移至togglePrivacyAgreed
      console.log('隐私政策状态变更为:', this.privacyAgreed);
    },

    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showModal({
        title: '隐私政策',
        content: '1. 我们收集您的头像、昵称等个人信息\n2. 用于提供服务和个性化推荐\n3. 未经您同意，不会向第三方分享您的信息',
        showCancel: false,
        confirmText: '我知道了'
      });
    },

    // 显示用户协议
    showUserAgreement() {
      uni.showModal({
        title: '用户协议',
        content: '1. 您需提供真实个人资料\n2. 您应遵守法律法规，不得发布违法、色情内容\n3. 对账号下的所有行为负责',
        showCancel: false,
        confirmText: '我知道了'
      });
    },

    // 进入下一步
    nextStep() {
      // 验证当前步骤
      if (this.validateCurrentStep()) {
        // 如果是最后一步，提交所有资料
        if (this.currentStep === this.totalSteps) {
          this.submitForm(true);
        } else {
          // 不是最后一步，只触发奖励动画并进入下一步
          this.triggerRewardAnimation();
        }
      }
    },

    // 新增：提交个人介绍到审核接口 - 修改为仅保存到本地，不提交到服务器
    async submitIntroduction() {
      try {
        console.log('保存个人介绍到本地');

        // 检查是否有个人介绍需要保存
        if (!this.formData.introduction) {
          console.log('没有个人介绍需要保存');
          this.triggerRewardAnimation();
          return;
        }

        // 直接触发奖励动画，进入下一步
        this.triggerRewardAnimation();

      } catch (error) {
        console.error('保存个人介绍失败:', error);

        // 即使失败，也继续流程
        this.triggerRewardAnimation();
      }
    },

    // 新增：批量提交相册照片到审核接口 - 修改为仅保存到本地，不提交到服务器
    async submitAlbumPhotos() {
      try {
        console.log('保存相册照片到本地');

        // 检查是否有照片需要保存
        if (this.formData.album.length === 0) {
          console.log('没有相册照片需要保存');
          this.triggerRewardAnimation();
          return;
        }

        // 直接触发奖励动画，进入下一步
        this.triggerRewardAnimation();

      } catch (error) {
        console.error('保存相册照片失败:', error);

        // 即使失败，也继续流程
        this.triggerRewardAnimation();
      }
    },

    // 显示跳过提示
    showSkipTip() {
      this.showSkipTipDialog = true;
    },

    // 确认跳过
    confirmSkip() {
      if (this.currentStep < this.totalSteps) {
        this.currentStep++;
      }
      this.showSkipTipDialog = false;

      // 显示跳过提示
      uni.showToast({
        title: '已跳过当前步骤',
        icon: 'none',
        duration: 1500
      });
    },

    // 跳过当前步骤 - 替换旧的方法
    skipStep() {
      this.showSkipTip();
    },

    // 点击步骤指示器
    handleStepClick(step) {
      // 只能点击已完成的步骤或当前步骤
      if (step <= this.completedSteps + 1) {
        this.currentStep = step;
      }
    },

    // 验证当前步骤
    validateCurrentStep() {
      let isValid = true;

      if (this.currentStep === 1) {
        // 验证头像
        if (!this.formData.avatar) {
          this.errors.avatar = '请上传头像';
          isValid = false;
        }

        // 验证昵称
        if (!this.formData.nickname) {
          this.errors.nickname = '请输入昵称';
          isValid = false;
        } else if (this.formData.nickname.length < 2) {
          this.errors.nickname = '昵称长度至少为2位';
          isValid = false;
        }

        // 验证性别
        if (!this.formData.gender) {
          this.errors.gender = '请选择性别';
          isValid = false;
        }

        // 验证生日
        if (!this.formData.birthday) {
          this.errors.birthday = '请选择您的生日';
          isValid = false;
        }

        // 检查头像是否正在上传
        if (this.isUploading) {
          this.errors.avatar = '头像上传中，请稍后';
          uni.showToast({
            title: '头像上传中，请稍后再试',
            icon: 'none'
          });
          isValid = false;
        }
      } else if (this.currentStep === 2) {
        // 验证相册 - 至少需要上传一张照片
        if (this.formData.album.length === 0) {
          this.errors.album = '请至少上传一张照片';
          uni.showToast({
            title: '请至少上传一张照片',
            icon: 'none'
          });
          isValid = false;
        }

        // 检查是否有照片正在上传
        if (this.photoUploading) {
          this.errors.album = '照片上传中，请稍后';
          uni.showToast({
            title: '照片上传中，请稍后再试',
            icon: 'none'
          });
          isValid = false;
        }

        // 检查相册中的照片是否都是远程URL（已上传成功）
        const hasLocalPhotos = this.formData.album.some(url => !url.startsWith('http'));
        if (hasLocalPhotos) {
          this.errors.album = '照片上传中，请稍后';
          uni.showToast({
            title: '照片上传中，请稍后再试',
            icon: 'none'
          });
          isValid = false;
        }
      } else if (this.currentStep === 3) {
        // 验证个人介绍
        if (!this.formData.introduction) {
          this.errors.introduction = '请选择或自定义个人介绍';
          isValid = false;
        }
      } else if (this.currentStep === 4) {
        // 验证兴趣爱好
        if (this.formData.interests.length < 1) {
          this.errors.interests = '请至少选择1个标签';
          isValid = false;
        }

        // 验证隐私协议
        if (!this.privacyAgreed) {
          uni.showToast({
            title: '请阅读并同意用户协议和隐私政策',
            icon: 'none'
          });
          isValid = false;
        }
      }

      // 如果验证通过，增加已完成步骤
      if (isValid && this.completedSteps < this.currentStep) {
        this.completedSteps = this.currentStep;
      }

      return isValid;
    },

    // 修改triggerRewardAnimation方法，添加相册审核状态检查
    triggerRewardAnimation() {
      // 获取当前步骤的金币奖励数量
      const rewardAmount = this.currentStepReward;

      // 设置当前奖励
      this.currentReward = {
        type: 'coins',
        amount: rewardAmount,
        name: '金币'
      };

      // 重置卡片状态
      this.isCardFlipped = false;

      // 显示奖励动画
      this.showRewardAnimation = true;

      // 自动翻转卡片，延迟1秒让用户看到卡片正面
      setTimeout(() => {
        this.isCardFlipped = true;

        // 卡片翻转后2秒关闭奖励动画并进入下一步
        setTimeout(() => {
          this.showRewardAnimation = false;

          // 进入下一步或提交表单
          if (this.currentStep < this.totalSteps) {
            this.currentStep++;
          } else {
            // 最后一步完成时提交所有表单数据
            this.submitForm(true);
          }
        }, 2000);
      }, 1000);
    },

    // 修改submitForm方法，改为最后一步一次性提交所有资料
    async submitForm(isLastStep) {
      if (this.isSubmitting) return;

      // 如果不是最后一步，不执行提交
      if (!isLastStep) {
        return;
      }

      // 检查头像是否为远程URL（已上传成功）
      if (this.formData.avatar && !this.formData.avatar.startsWith('http')) {
        console.error('头像还未上传成功，无法提交资料');
        uni.showToast({
          title: '头像上传中，请稍候再试',
          icon: 'none'
        });
        return;
      }

      // 检查相册照片是否都已上传成功
      const hasLocalPhotos = this.formData.album.some(url => !url.startsWith('http'));
      if (hasLocalPhotos) {
        console.error('相册照片还未全部上传成功，无法提交资料');
        uni.showToast({
          title: '照片上传中，请稍候再试',
          icon: 'none'
        });
        return;
      }

      // #ifdef MP-WEIXIN
      // 检查是否已经订阅
      if (!SubscribeManager.isSubscribed(STORAGE_KEYS.POST.SUBSCRIBED)) {
        // 检查是否需要显示提示
        if (SubscribeManager.shouldShowPrompt(STORAGE_KEYS.POST.SUBSCRIBED, STORAGE_KEYS.POST.LAST_PROMPT, 'POST')) {
          // 记录提示时间
          SubscribeManager.recordPromptTime(STORAGE_KEYS.POST.LAST_PROMPT);
          // 显示订阅弹窗
          this.showSubscribe = true;
          return; // 等待用户操作订阅弹窗
        }
      }
      // #endif

      this.isSubmitting = true;

      try {
        // 准备要提交的完整用户资料
        const profileData = {
          // 基本信息（第一步）
          nickname: this.formData.nickname,
          avatar: this.formData.avatar,
          sex: this.formData.gender === 'male' ? 1 : 2, // 转换性别格式：male=>1, female=>2
          birthday: this.formData.birthday,
          allowFriendAdd: this.formData.allowFriendAdd, // 添加好友添加权限设置

          // 相册信息（第二步）
          albumPhotos: this.formData.album.map(imageUrl => ({
            imageUrl: imageUrl,
            description: '用户资料完善相册照片'
          })),

          // 个人介绍（第三步）
          signature: this.getIntroductionText(),

          // 兴趣标签（第四步）
          interestTagIds: this.formData.interests
        };

        // 仅在非审核模式下添加微信号
        if (!this.wxAuditMode && this.formData.wechat) {
          profileData.wechat = this.formData.wechat;
        }

        console.log('一次性提交所有用户资料:', profileData);

        // 调用审核接口提交所有资料
        await this.submitUserProfileForAudit(profileData);

        // 提交成功后显示提示
        uni.showToast({
          title: '资料提交成功',
          icon: 'success',
          duration: 2000
        });

        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      } catch (error) {
        console.error('提交表单数据失败:', error);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isSubmitting = false;
      }
    },

    // 新增：聚焦输入框
    focusInput(field) {
      this.inputFocus = field;
    },

    // 新增：聚焦文本域
    focusTextarea(field) {
      this.textareaFocus = field;
    },

    // 新增：开始滑动
    startSlide(e) {
      this.isSliding = true;
      const slider = e.currentTarget.parentNode;
      this.sliderWidth = slider.offsetWidth;
      this.sliderOffsetLeft = slider.getBoundingClientRect().left;
    },

    // 新增：滑动中
    moveSlide(e) {
      if (this.isSliding) {
        let x = e.touches[0].clientX - this.sliderOffsetLeft;
        let percentage = Math.max(0, Math.min(1, x / this.sliderWidth));
        let age = Math.round(percentage * 42) + 18; // 18到60的范围
        this.formData.age = age;
        this.errors.age = '';
      }
    },

    // 新增：结束滑动
    endSlide() {
      this.isSliding = false;
    },

    // 新增：切换隐私同意状态
    togglePrivacyAgreed() {
      this.privacyAgreed = !this.privacyAgreed;
      this.onPrivacyChange(); // 调用原来的方法保持兼容性
    },

    // 打开生日选择器
    openBirthdayPicker() {
      this.showBirthdayPicker = true;
      this.errors.birthday = '';
    },

    // 处理生日选择确认
    onBirthdayConfirm(e) {
      // 格式化日期，确保月份和日期有两位数
      const formattedMonth = e.month.padStart(2, '0');
      const formattedDay = e.day.padStart(2, '0');
      this.formData.birthday = e.year + '-' + formattedMonth + '-' + formattedDay;
      this.errors.birthday = '';
    },

    // 新增：设置相册可见性
    setAlbumVisibility(visibility) {
      this.formData.albumVisibility = visibility;
    },

    // 新增：获取选择的介绍文本
    getIntroductionText() {
      if (!this.formData.introduction) return '';

      const option = this.introductionOptions.find(opt => opt.id === this.formData.introduction);
      return option ? option.text : '';
    },

    // 新增：选择介绍
    selectIntroduction(id) {
      this.formData.introduction = id;
      this.showIntroSelector = false;
      this.errors.introduction = '';
    },

    // 添加新的按钮处理方法
    handleNextStep() {
      if (this.canGoNext) {
        this.nextStep();
      } else {
        // 根据当前步骤显示不同的提示
        if (this.currentStep === 1) {
          if (!this.formData.avatar) {
            uni.showToast({
              title: '请上传头像',
              icon: 'none'
            });
          } else if (!this.formData.nickname || this.formData.nickname.length < 2) {
            uni.showToast({
              title: '请输入有效的昵称(至少2个字符)',
              icon: 'none'
            });
          } else if (!this.formData.gender) {
            uni.showToast({
              title: '请选择性别',
              icon: 'none'
            });
          } else if (!this.formData.birthday) {
            uni.showToast({
              title: '请选择您的生日',
              icon: 'none'
            });
          }
        } else if (this.currentStep === 2) {
          if (this.formData.album.length === 0) {
            uni.showToast({
              title: '请至少上传一张照片',
              icon: 'none'
            });
          }
        } else if (this.currentStep === 3) {
          if (!this.formData.introduction) {
            uni.showToast({
              title: '请选择个人介绍',
              icon: 'none'
            });
          }
        } else if (this.currentStep === 4) {
          if (this.formData.interests.length < 1) {
            uni.showToast({
              title: '请至少选择1个标签',
              icon: 'none'
            });
          } else if (!this.privacyAgreed) {
            uni.showToast({
              title: '请阅读并同意用户协议和隐私政策',
              icon: 'none'
            });
          }
        }
      }
    },

    // 修改为打开tn-select弹窗
    openIntroductionSelect() {
      // 先找出当前选中项的索引
      if (this.formData.introduction) {
        const index = this.introductionOptions.findIndex(item => item.id === this.formData.introduction);
        if (index > -1) {
          this.introductionSelectIndex = index;
        }
      }
      // 重置搜索关键词
      this.introSearchKeyword = '';
      this.showIntroSelect = true;
      this.errors.introduction = '';
    },

    // 新增：处理介绍选择确认事件
    onIntroductionConfirm(e) {
      // 如果事件返回了选中值且有有效值
      if (e && e.length > 0 && e[0] && e[0].value) {
        this.formData.introduction = e[0].value;
        this.errors.introduction = '';
        console.log('从事件获取值：', e[0].value);
      }
      // 否则使用当前选择的索引
      else if (this.introductionOptions && this.introductionOptions.length > 0 &&
          this.introductionSelectIndex >= 0 && this.introductionSelectIndex < this.introductionOptions.length) {
        const currentValue = this.introductionOptions[this.introductionSelectIndex].id;
        this.formData.introduction = currentValue;
        this.errors.introduction = '';
        console.log('从索引获取值：', currentValue);
      }
      // 如果上述两种方式都无法获取值，则使用第一个选项
      else if (this.introductionOptions && this.introductionOptions.length > 0) {
        this.formData.introduction = this.introductionOptions[0].id;
        this.errors.introduction = '';
        console.log('使用默认第一个值：', this.introductionOptions[0].id);
      } else {
        console.log('无法获取有效值');
      }
    },

    // 新增：随机选择一个介绍
    randomSelectIntroduction() {
      const randomIndex = Math.floor(Math.random() * this.introductionOptions.length);
      this.formData.introduction = this.introductionOptions[randomIndex].id;
      this.errors.introduction = '';
    },

    // 手动处理确认点击
    onSelectConfirmClick() {
      // 获取当前选中值（考虑搜索过滤后的情况）
      const tnSelect = this.$refs.introductionSelect;

      if (tnSelect && tnSelect.selectValue && tnSelect.selectValue.length > 0) {
        // 使用组件内部的选中值
        const currentValue = tnSelect.selectValue[0].value;
        if (currentValue) {
          this.formData.introduction = currentValue;
          this.errors.introduction = '';
        }
      } else {
        // 回退到通过索引获取值
        if (this.introductionOptions && this.introductionOptions.length > 0 &&
            this.introductionSelectIndex >= 0 && this.introductionSelectIndex < this.introductionOptions.length) {
          const currentValue = this.introductionOptions[this.introductionSelectIndex].id;
          // 设置值
          this.formData.introduction = currentValue;
          this.errors.introduction = '';
        } else {
          // 如果没有有效的选择，使用第一个选项
          if (this.introductionOptions && this.introductionOptions.length > 0) {
            this.formData.introduction = this.introductionOptions[0].id;
            this.errors.introduction = '';
          }
        }
      }

      this.showIntroSelect = false;
    },

    // 监听选择变化事件
    onIntroductionChange(e) {
      // 更新当前选中的索引
      if (e && e.detail && e.detail.value && e.detail.value.length > 0) {
        this.introductionSelectIndex = e.detail.value[0];
      }
    },

    // 监听列选择变化事件 - tn-select 实际使用的事件名是 columnChange
    onIntroductionColumnChange(e) {
      // 更新当前选中的索引
      if (e && e.detail && e.detail.value && e.detail.value.length > 0) {
        this.introductionSelectIndex = e.detail.value[0];
        console.log('选择变更为索引:', this.introductionSelectIndex);
      } else {
        console.log('选择变更事件触发，但没有有效值', e);
      }
    },

    // 清除介绍搜索关键词
    clearIntroSearch() {
      this.introSearchKeyword = '';
      // 重置为第一个选项的索引
      if (this.formattedIntroductionOptions.length > 0) {
        this.introductionSelectIndex = 0;
      }
    },

    // 修改：获取标签列表数据
    async fetchTagList() {
      try {
        const result = await API.user.getTagList();
        console.log('获取到的标签数据:', result);

        // 处理后端返回的标签数据
        // 后端返回的数据格式为：{ data: [ { id: 1, name: "标签名称", selected: false }, ... ] }
        const tagList = result.data || result;

        if (Array.isArray(tagList)) {
          // 直接使用后端返回的标签列表
          this.interestTags = tagList;

          // 如果用户之前已选择了标签，需要恢复选中状态
          if (this.formData.interests && this.formData.interests.length > 0) {
            const selectedIds = this.formData.interests;
            this.interestTags.forEach(tag => {
              // 如果标签ID在已选择的ID列表中，则标记为已选择
              if (selectedIds.includes(tag.id)) {
                tag.selected = true;
              }
            });
          }
        } else {
          console.error('标签数据格式不正确:', tagList);
          // 如果API返回数据格式异常，使用备用的静态数据
          this.initStaticTagData();
        }
      } catch (error) {
        console.error('获取标签列表失败:', error);
        // 如果API请求失败，使用备用的静态数据
        this.initStaticTagData();
        uni.showToast({
          title: '获取标签失败，使用默认数据',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 修改：初始化静态标签数据的方法（作为后备）
    initStaticTagData() {
      // 使用模拟数据作为备用，直接构建符合后端格式的数据
      const mockTags = [
        // 游戏类标签
        { id: 1, name: 'MOBA', selected: false },
        { id: 2, name: '射击游戏', selected: false },
        { id: 3, name: '卡牌游戏', selected: false },
        { id: 4, name: '角色扮演', selected: false },
        { id: 5, name: '策略游戏', selected: false },
        // 爱好类标签
        { id: 6, name: '读书', selected: false },
        { id: 7, name: '旅行', selected: false },
        { id: 8, name: '摄影', selected: false },
        { id: 9, name: '电影', selected: false },
        { id: 10, name: '音乐', selected: false },
        // 性格类标签
        { id: 11, name: '活泼开朗', selected: false },
        { id: 12, name: '沉稳内敛', selected: false },
        { id: 13, name: '热情洋溢', selected: false },
        { id: 14, name: '温柔体贴', selected: false },
        { id: 15, name: '理性思考', selected: false }
      ];

      // 直接使用模拟数据
      this.interestTags = mockTags;

      // 如果用户之前已选择了标签，需要恢复选中状态
      if (this.formData.interests && this.formData.interests.length > 0) {
        const selectedIds = this.formData.interests;
        this.interestTags.forEach(tag => {
          if (selectedIds.includes(tag.id)) {
            tag.selected = true;
          }
        });
      }
    },

    // 添加获取模板方法
    async fetchIntroductionTemplates() {
      try {
        const result = await getIntroductionTemplates();
		const templateList = result.data || result;
        // 直接使用后端返回的数据结构
        this.introductionOptions = templateList.map(item => ({
          id: item.id, // 使用后端返回的id
          text: item.content // 使用content作为显示文本
        }));
      } catch (error) {
        console.error('获取介绍模板失败:', error);
        // 加载失败时设置默认模板
        this.setDefaultTemplates();
      }
    },

    // 设置默认模板（仅在API调用失败时使用）
    setDefaultTemplates() {
      this.introductionOptions = [
        { id: 1, text: '热爱电竞游戏，寻找一起开黑的好友' },
        { id: 2, text: '喜欢社交，希望认识更多有趣的人' },
        { id: 3, text: '游戏高手，擅长竞技类游戏，欢迎挑战' },
        { id: 4, text: '休闲玩家，享受游戏的乐趣，不在乎输赢' },
        // 其余默认选项...
      ];
    },

    // 验证第一步
    validateStep1() {
      let isValid = true;

      // 验证头像
      if (!this.formData.avatar) {
        this.errors.avatar = '请上传您的头像';
        isValid = false;
      } else {
        this.errors.avatar = '';
      }

      // 验证昵称
      if (!this.formData.nickname) {
        this.errors.nickname = '请输入您的昵称';
        isValid = false;
      } else if (this.formData.nickname.length < 2) {
        this.errors.nickname = '昵称至少需要2个字符';
        isValid = false;
      } else {
        this.errors.nickname = '';
      }

      // 验证性别
      if (!this.formData.gender) {
        this.errors.gender = '请选择您的性别';
        isValid = false;
      } else {
        this.errors.gender = '';
      }

      // 验证生日
      if (!this.formData.birthday) {
        this.errors.birthday = '请选择您的生日';
        isValid = false;
      } else {
        this.errors.birthday = '';
      }

      // 验证微信号
      if (this.formData.wechat && this.formData.wechat.length > 0) {
        // 只有当用户输入了微信号才验证格式，此处可以添加微信号格式验证逻辑
        // 例如: if(!微信号格式验证正则.test(this.formData.wechat)) { ... }
        // 暂时不添加特定格式验证
        this.errors.wechat = '';
      } else {
        // 微信号为空时不报错
        this.errors.wechat = '';
      }

      return isValid;
    },

    // 新增：好友权限变更处理
    onFriendPermissionChange(value) {
      console.log('好友添加权限设置变更:', value);
      this.formData.allowFriendAdd = value;
    },

    /**
     * 订阅消息成功完成回调
     */
    async onSubscribeComplete() {
      // 更新状态
      SubscribeManager.silentSubscribe(
        'POST_ALL', 
        STORAGE_KEYS.POST.SUBSCRIBED, 
        STORAGE_KEYS.POST.SUBSCRIBE_TIME, 
        STORAGE_KEYS.POST.LAST_PROMPT,
        (result) => {
          // 关闭当前弹窗
          this.showSubscribe = false;
          
          if (result && result.accepted) {
            // 用户接受了订阅，继续提交表单
            this.submitForm(true);
          } else if (result && result.rejected) {
            // 用户拒绝了订阅，引导用户去设置页面开启权限（已在封装里面处理）
          } else {
            // 其他情况，如环境不支持等，继续提交表单
            this.submitForm(true);
          }
        }
      );
    },

  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #020303;
  min-height: 100vh;
}

.container {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 40rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

/* 进度条样式 */
.header {
  text-align: center;
  margin-bottom: 40rpx;
  padding-top: 30rpx;
}

.progress-container {
  position: relative;
  margin: 10rpx auto 60rpx;
  width: 92%;
  max-width: 800rpx;
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background: #1a1a1a;
  border-radius: 4rpx;
  overflow: hidden;
  box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B3F73C, #00C4FF);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-steps {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

.step {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #1a1a1a;
  border: 4rpx solid #020303;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #888;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.step.completed {
  background: #B3F73C;
  color: #020303;
}

.step.active {
  background: #00C4FF;
  color: #020303;
  transform: scale(1.2);
}

.step-label {
  position: absolute;
  top: 72rpx;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 24rpx;
  color: #888;
  transition: all 0.3s;
}

.step.completed .step-label,
.step.active .step-label {
  color: #B3F73C;
  font-weight: 500;
  transform: translateX(-50%) scale(1.05);
}

/* 奖励信息样式 */
.reward-info {
  text-align: center;
  padding: 24rpx;
  background: rgba(179, 247, 60, 0.1);
  border-radius: 24rpx;
  border: 2rpx solid rgba(179, 247, 60, 0.2);
  margin-bottom: 32rpx;
}

.reward-title {
  font-size: 30rpx;
  color: #B3F73C;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.reward-progress {
  font-size: 28rpx;
  color: #888;
}

.reward-coins {
  color: #ffd700;
  font-weight: bold;
}

/* 表单样式 */
.setup-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
  padding-top: 20rpx;
  position: relative;
}

.setup-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80rpx;
  height: 8rpx;
  background: linear-gradient(90deg, #B3F73C, transparent);
  border-radius: 4rpx;
}

.setup-form::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80rpx;
  height: 8rpx;
  background: linear-gradient(90deg, transparent, #00C4FF);
  border-radius: 4rpx;
}

.form-title {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 40rpx;
  text-align: center;
  color: #e0e0e0;
}

.form-subtitle {
  font-size: 28rpx;
  color: #888;
  text-align: center;
  margin-bottom: 60rpx;
}

.form-group {
  margin-bottom: 56rpx;
  position: relative;
  transition: all 0.3s;
}

.form-label {
  display: block;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.form-label .required {
  color: #ff5252;
  margin-left: 8rpx;
}

.form-label .warning {
  font-size: 24rpx;
  color: #ffbb00;
  margin-left: 16rpx;
  display: flex;
  align-items: center;
}

.form-label .warning .tn-icon-warning-fill {
  margin-right: 4rpx;
  font-size: 26rpx;
}

.form-input {
  width: 100%;
  padding: 28rpx 32rpx;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  border-radius: 28rpx;
  color: #e0e0e0;
  font-size: 32rpx;
  transition: all 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #B3F73C;
  box-shadow: 0 0 0 6rpx rgba(179, 247, 60, 0.2);
  transform: translateY(-4rpx);
}

.form-input.error {
  border-color: #ff5252;
}

.form-tip {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #888;
}

.form-error {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #ff5252;
}

/* 底部按钮区域 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  margin-top: auto;
  padding-top: 48rpx;
}

.reward-badge {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  font-size: 30rpx;
  color: #B3F73C;
  margin-bottom: 8rpx;
}

.action-row {
  display: flex;
  gap: 30rpx;
}

.btn {
  flex: 1;
  padding: 32rpx 40rpx;
  border-radius: 28rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-skip {
  background: #1a1a1a;
  color: #888;
  border: 2rpx solid #333;
}

.btn-skip:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.btn-next {
  background: #B3F73C;
  color: #020303;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 16rpx rgba(179, 247, 60, 0.25);
}

.btn-next:active {
  transform: translateY(4rpx);
  box-shadow: 0 4rpx 8rpx rgba(179, 247, 60, 0.2);
}

.btn-next::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: button-shimmer 2s infinite;
}

@keyframes button-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 头像上传样式增强 */
.avatar-upload {
  text-align: center;
  margin-bottom: 60rpx;
}

.avatar-container {
  position: relative;
  width: 260rpx;
  height: 260rpx;
  margin: 0 auto 36rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #1a1a1a;
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.3),
              0 0 0 4rpx rgba(179, 247, 60, 0.2),
              inset 0 0 30rpx rgba(0, 196, 255, 0.1);
  transition: all 0.3s ease;
}

.avatar-container image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1e1e1e 0%, #141414 100%);
  color: #B3F73C;
}

.upload-icon-wrapper {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background: linear-gradient(145deg, #020303, #0e0e0e);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6rpx 16rpx rgba(0, 196, 255, 0.15);
}

.upload-icon-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2rpx solid transparent;
  background: linear-gradient(145deg, #B3F73C, #00C4FF) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.upload-icon-wrapper .tn-icon-upload {
  font-size: 46rpx;
  background: linear-gradient(to right, #B3F73C, #00C4FF);
  -webkit-background-clip: text;
  color: transparent;
  animation: pulse 2s infinite;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(2, 3, 3, 0.3), rgba(2, 3, 3, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.camera-icon-wrapper {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background: rgba(2, 3, 3, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(179, 247, 60, 0.6);
  box-shadow: 0 0 20rpx rgba(0, 196, 255, 0.4);
}

.camera-icon-wrapper .tn-icon-camera {
  font-size: 46rpx;
  color: #ffffff;
  text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.8);
}

.avatar-error {
  color: #ff5252;
  font-size: 24rpx;
  margin-top: 16rpx;
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}

/* 性别选择样式 */
.gender-options {
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
}

.gender-option {
  flex: 1;
  padding: 30rpx 20rpx;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  border-radius: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  transition: all 0.3s;
}

.gender-option.active {
  background: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
  transform: translateY(-4rpx);
}

.gender-icon {
  font-size: 60rpx;
  transition: all 0.3s;
}

.gender-option.active .gender-icon {
  transform: scale(1.1);
}

.gender-option:nth-child(1) .gender-icon {
  color: #00C4FF;
}

.gender-option:nth-child(2) .gender-icon {
  color: #FF71D2;
}

.gender-option:nth-child(1).active .gender-icon {
  color: #00C4FF;
  text-shadow: 0 0 10rpx rgba(0, 196, 255, 0.5);
}

.gender-option:nth-child(2).active .gender-icon {
  color: #FF71D2;
  text-shadow: 0 0 10rpx rgba(255, 113, 210, 0.5);
}

/* 自定义输入框样式 */
.tn-input {
  position: relative;
}

.placeholder {
  color: #888;
}

/* 自定义滑块样式 */
.custom-slider {
  position: relative;
  width: 100%;
  height: 40rpx;
  margin: 30rpx 0;
}

.slider-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 8rpx;
  background-color: #1a1a1a;
  border-radius: 4rpx;
}

.slider-fill {
  height: 100%;
  background: linear-gradient(90deg, #B3F73C, #00C4FF);
  border-radius: 4rpx;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: linear-gradient(145deg, #B3F73C, #00C4FF);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.2s, box-shadow 0.2s;
}

.slider-thumb:active {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
}

/* 自定义复选框样式 */
.custom-checkbox {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
}

.checkbox-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 4rpx;
  border: 2rpx solid #B3F73C;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #020303;
  font-size: 24rpx;
}

.checkbox-icon.checked {
  background-color: #B3F73C;
}

.checkbox-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.privacy-text {
  font-size: 26rpx;
  color: #888;
}

.privacy-link {
  font-size: 26rpx;
  color: #B3F73C;
}

/* 按钮禁用状态 */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 文本域样式 */
.textarea-wrapper {
  position: relative;
  width: 100%;
  height: 200rpx;
  border-radius: 28rpx;
  overflow: hidden;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  transition: all 0.3s;
}

.textarea-wrapper:focus-within {
  border-color: #B3F73C;
  box-shadow: 0 0 0 6rpx rgba(179, 247, 60, 0.2);
  transform: translateY(-4rpx);
}

.bio-textarea {
  width: 100%;
  height: 100%;
  padding: 20rpx 32rpx;
  background: transparent;
  color: #e0e0e0;
  font-size: 32rpx;
}

.bio-textarea .textarea-placeholder {
  color: #888;
}

.text-counter {
  text-align: right;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #888;
}

/* 年龄值样式 */
.age-value {
  margin-top: 16rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #B3F73C;
}

/* 兴趣爱好样式 */
.interests-container {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin: 30rpx 0 20rpx;
  color: #e0e0e0;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.tag-item {
  padding: 16rpx 30rpx;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #aaa;
  transition: all 0.3s;
}

.tag-item.active {
  background: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
  color: #ffffff;
  box-shadow: 0 4rpx 8rpx rgba(179, 247, 60, 0.25);
  transform: translateY(-2rpx);
}

.interests-error {
  margin-top: 0;
  margin-bottom: 16rpx;
}

.interests-tip {
  text-align: center;
  font-size: 26rpx;
  color: #888;
}

/* 联系方式样式 */
.contact-tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  border-radius: 28rpx;
  background: #1a1a1a;
  padding: 6rpx;
}

.contact-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #aaa;
  border-radius: 24rpx;
  transition: all 0.2s;
}

.contact-tab.active {
  background: #B3F73C;
  color: #020303;
  font-weight: 600;
}

.contact-label {
  margin-top: 20rpx;
}

/* 完成提示样式 */
.completion-info {
  margin-top: 60rpx;
  background: linear-gradient(145deg, rgba(179, 247, 60, 0.05), rgba(0, 196, 255, 0.05));
  border-radius: 24rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  border-left: 4rpx solid #B3F73C;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}

.completion-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
}

.completion-text {
  font-size: 26rpx;
  color: #e0e0e0;
  flex: 1;
  line-height: 1.6;
}

/* 修改输入框样式 */
.input-wrapper {
  position: relative;
  width: 100%;
  border-radius: 32rpx;
  overflow: hidden;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.input-wrapper:focus-within, .input-wrapper.focused {
  border-color: #B3F73C;
  box-shadow: 0 0 16rpx rgba(179, 247, 60, 0.25);
  transform: translateY(-6rpx);
}

/* 输入框图标 */
.input-icon {
  font-size: 40rpx;
  color: #B3F73C;
  margin-left: 32rpx;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 字数计数器 */
.input-counter {
  padding-right: 32rpx;
  font-size: 24rpx;
  color: #888;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 昵称输入框特殊样式 */
.nickname-wrapper {
  padding: 8rpx 0;
  border-radius: 32rpx;
  background: linear-gradient(145deg, #1a1a1a, #222);
  box-shadow: inset 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
  height: 108rpx; /* 确保高度固定 */
}

/* 修改昵称输入样式 */
.nickname-input {
  flex: 1;
  height: 100%; /* 使用100%高度填充父容器 */
  padding: 0 24rpx;
  background: transparent;
  color: #e0e0e0;
  font-size: 32rpx;
  display: flex;
  align-items: center; /* 垂直居中 */
  line-height: 1.2; /* 调整行高 */
}

.nickname-input .input-placeholder {
  color: #666;
}

.form-input.error, .input-wrapper.error {
  border-color: #ff5252;
  box-shadow: 0 0 16rpx rgba(255, 82, 82, 0.15);
}

.input-wrapper.error .input-icon {
  color: #ff5252;
}

/* 生日选择样式 */
.birthday-wrapper {
  cursor: pointer;
  padding: 8rpx 0;
  border-radius: 32rpx;
  background: linear-gradient(145deg, #1a1a1a, #222);
  box-shadow: inset 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
  height: 108rpx; /* 确保高度固定 */
}

.birthday-text {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  background: transparent;
  color: #e0e0e0;
  font-size: 32rpx;
}

.birthday-placeholder {
  color: #666;
}

/* 相册上传区域样式 */
.album-upload-area {
  margin-bottom: 40rpx;
}

.album-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.album-item {
  width: calc((100% - 40rpx) / 3);
  height: 220rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  background-color: #1a1a1a;
}

.album-item image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24rpx;
}

.add-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2rpx dashed #3a3a3a;
  color: #aaa;
}

.add-photo .tn-icon-add {
  font-size: 60rpx;
  margin-bottom: 10rpx;
}

.add-text {
  font-size: 24rpx;
}

.album-tips {
  margin-top: 40rpx;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 16rpx;
  font-size: 26rpx;
  color: #888;
}

.tip-item .tn-icon-info-fill {
  color: #B3F73C;
}

/* 新增：相册权限设置样式 */
.visibility-setting {
  margin: 40rpx 0;
  background: rgba(26, 26, 26, 0.5);
  border-radius: 28rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

.visibility-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  color: #e0e0e0;
  display: flex;
  align-items: center;
}

.visibility-title::before {
  content: "";
  display: inline-block;
  width: 8rpx;
  height: 28rpx;
  background: linear-gradient(to bottom, #B3F73C, #00C4FF);
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.visibility-options {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
}

.visibility-option {
  flex: 1;
  padding: 24rpx 0;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  transition: all 0.3s;
}

.visibility-option.active {
  background: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 16rpx rgba(179, 247, 60, 0.15);
}

.visibility-icon {
  font-size: 44rpx;
  color: #B3F73C;
}

.visibility-content {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.visibility-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #e0e0e0;
}

.visibility-desc {
  font-size: 24rpx;
  color: #888;
}

/* 新增：个人介绍选择器样式 */
.intro-selector {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.intro-selector-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.intro-selector-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #1a1a1a;
  border-radius: 30rpx 30rpx 0 0;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  animation: slideUp 0.3s ease;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.3);
  border-top: 4rpx solid rgba(179, 247, 60, 0.3);
}

.intro-selector-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 2rpx solid #333;
  background-color: #1a1a1a;
  border-radius: 30rpx 30rpx 0 0;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.intro-selector-header text {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
}

.intro-selector-header .close-icon {
  font-size: 40rpx;
  color: #ffffff;
  padding: 10rpx;
}

.intro-selector-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 40rpx 120rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.intro-option {
  padding: 30rpx;
  background-color: #222;
  border-radius: 16rpx;
  width: 100%;
  border: 2rpx solid transparent;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.intro-option.active {
  background-color: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(179, 247, 60, 0.15);
}

.intro-option-text {
  font-size: 28rpx;
  color: #e0e0e0;
  flex: 1;
  line-height: 1.5;
  margin-right: 20rpx;
}

.checked-icon {
  flex-shrink: 0;
  color: #B3F73C;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 添加随机介绍按钮样式 */
.random-intro-btn {
  color: #B3F73C;
  font-weight: 500;
  text-decoration: underline;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.random-intro-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 修改tip-item样式，使其可点击 */
.tip-item:last-child {
  cursor: pointer;
}

.tip-item:last-child .tn-icon-wand {
  color: #00C4FF;
  font-size: 30rpx;
}

/* 添加过渡区域样式 */
.step-transition {
  height: 20rpx;
  margin: 30rpx 0 40rpx;
  position: relative;
}

.step-transition:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100rpx;
  height: 4rpx;
  background: linear-gradient(90deg, rgba(179, 247, 60, 0), rgba(179, 247, 60, 0.5), rgba(179, 247, 60, 0));
  border-radius: 2rpx;
}

// 新增样式
.upload-icon-wrapper .tn-icon-camera {
  font-size: 46rpx;
  background: linear-gradient(to right, #B3F73C, #00C4FF);
  -webkit-background-clip: text;
  color: transparent;
  animation: pulse 2s infinite;
}

/* 奖励动画样式 */
.reward-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.3s ease;
}

.reward-tap-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.reward-card-container {
  width: 500rpx;
  height: 700rpx;
  perspective: 1500rpx;
}

.reward-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}

.reward-card.flipped {
  transform: rotateY(180deg);
}

.reward-card-front, .reward-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.5);
}

.reward-card-front {
  background: linear-gradient(135deg, #2a2a2a, #121212);
  border: 6rpx solid #B3F73C;
  overflow: hidden;
}

.card-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: radial-gradient(#B3F73C 10%, transparent 10%);
  background-size: 20rpx 20rpx;
}

.questionmark-icon {
  font-size: 200rpx;
  color: #B3F73C;
  animation: pulse 2s infinite;
}

.card-front-text {
  position: absolute;
  bottom: 80rpx;
  font-size: 36rpx;
  color: #FFFFFF;
  background: rgba(179, 247, 60, 0.9);
  padding: 16rpx 40rpx;
  border-radius: 40rpx;
  font-weight: bold;
  color: #020303;
  box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.6);
}

.reward-card-back {
  background: linear-gradient(135deg, #1a1a1a, #020303);
  border: 6rpx solid rgba(179, 247, 60, 0.8);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reward-type {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
  position: relative;
}

.reward-type.coins {
  background: radial-gradient(circle at 30% 30%, #FFD700, #B8860B);
  color: #000;
}

.reward-type.exp {
  background: radial-gradient(circle at 30% 30%, #9C27B0, #4A148C);
  color: #fff;
}

.reward-type.diamond {
  background: radial-gradient(circle at 30% 30%, #00BCD4, #006064);
  color: #fff;
}

.reward-type::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 60%);
}

.reward-amount {
  font-size: 80rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin: 30rpx 0;
  text-shadow: 0 0 20rpx rgba(179, 247, 60, 0.8);
}

.reward-name {
  font-size: 44rpx;
  color: #B3F73C;
  padding: 16rpx 60rpx;
  border-radius: 40rpx;
  background: rgba(179, 247, 60, 0.1);
  border: 2rpx solid rgba(179, 247, 60, 0.3);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* 优化的第一步布局样式 */
.basic-info-row {
  display: flex;
  align-items: flex-start;
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.avatar-upload-compact {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #1a1a1a;
  position: relative;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.3),
              0 0 0 3rpx rgba(179, 247, 60, 0.2);
  transition: all 0.3s;
  flex-shrink: 0;
}

.avatar-upload-compact image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  color: #B3F73C;
}

.avatar-placeholder-compact .tn-icon-camera {
  font-size: 60rpx;
}

.avatar-overlay-compact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 3, 3, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  color: #ffffff;
  opacity: 0;
}

.avatar-upload-compact:active .avatar-overlay-compact {
  opacity: 1;
}

.form-group-compact {
  flex: 1;
  margin-bottom: 36rpx;
}

.form-label-compact {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 28rpx;
  color: #e0e0e0;
  font-weight: 500;
}

.warning-compact {
  font-size: 24rpx;
  color: #ffbb00;
  margin-left: auto;
}

.gender-options-compact {
  display: flex;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.gender-option-compact {
  flex: 1;
  padding: 20rpx 10rpx;
  background: #1a1a1a;
  border: 2rpx solid #1a1a1a;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  transition: all 0.3s;
}

.gender-option-compact.active {
  background: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
}

.gender-option-compact:nth-child(1) .gender-icon {
  color: #00C4FF;
}

.gender-option-compact:nth-child(2) .gender-icon {
  color: #FF71D2;
}

/* 改进的第一步布局样式 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar-upload-improved {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #1a1a1a, #222);
  position: relative;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3),
              0 0 0 4rpx rgba(179, 247, 60, 0.2);
  transition: all 0.3s;
}

.avatar-upload-improved image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder-improved {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
  color: #B3F73C;
}

.avatar-placeholder-improved .tn-icon-camera {
  font-size: 60rpx;
  margin-bottom: 12rpx;
}

.upload-hint {
  font-size: 24rpx;
  color: #aaa;
}

.avatar-overlay-improved {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 3, 3, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-upload-improved:active .avatar-overlay-improved {
  opacity: 1;
}

.avatar-error {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #ff5252;
}

.form-group-improved {
  margin-bottom: 40rpx;
}

.form-label-improved {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 30rpx;
  color: #e0e0e0;
  font-weight: 500;
}

.warning-improved {
  font-size: 24rpx;
  color: #ffbb00;
  margin-left: 16rpx;
  display: flex;
  align-items: center;
}

.warning-improved:before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rpx;
  height: 24rpx;
  background: #ffbb00;
  color: #000;
  border-radius: 50%;
  margin-right: 6rpx;
  font-size: 18rpx;
  font-weight: bold;
}

.input-wrapper-improved {
  position: relative;
  width: 100%;
  border-radius: 28rpx;
  overflow: hidden;
  background: linear-gradient(145deg, #1a1a1a, #222);
  border: 2rpx solid #2a2a2a;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  height: 100rpx;
  box-shadow: inset 0 2rpx 5rpx rgba(0,0,0,0.2);
}

.input-wrapper-improved:focus-within,
.input-wrapper-improved.focused {
  border-color: #B3F73C;
  box-shadow: 0 0 16rpx rgba(179, 247, 60, 0.25);
  transform: translateY(-2rpx);
}

.input-wrapper-improved.error {
  border-color: #ff5252;
  box-shadow: 0 0 16rpx rgba(255, 82, 82, 0.15);
}

.gender-options-improved {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
}

.gender-option-improved {
  flex: 1;
  padding: 24rpx 0;
  background: linear-gradient(145deg, #1a1a1a, #222);
  border: 2rpx solid #2a2a2a;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  transition: all 0.3s;
  box-shadow: inset 0 2rpx 5rpx rgba(0,0,0,0.2);
  color: #e0e0e0 !important; /* 添加文字颜色 */
}

.gender-option-improved.active {
  background: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 16rpx rgba(179, 247, 60, 0.15);
}

.gender-option-improved .gender-icon {
  font-size: 44rpx;
  transition: all 0.3s;
}

.gender-option-improved:nth-child(1) .gender-icon {
  color: #00C4FF;
}

.gender-option-improved:nth-child(2) .gender-icon {
  color: #FF71D2;
}

.gender-option-improved.active .gender-icon {
  transform: scale(1.2);
}

.gender-option-improved:active {
  transform: translateY(2rpx);
}

@keyframes pulseContinue {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 增强继续完成按钮的视觉效果 */
.skip-confirm {
  background: linear-gradient(45deg, #00C4FF, #0088ff);
  font-weight: bold;
  letter-spacing: 2rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.skip-confirm::before {
  content: "→";
  position: absolute;
  right: 30rpx;
  animation: moveRight 1.5s infinite;
  opacity: 0.8;
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(10rpx);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
}

.skip-tip-actions .skip-confirm {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.skip-confirm .tn-icon-right {
  font-size: 24rpx;
  transition: transform 0.3s;
  margin-left: 8rpx;
}

.skip-confirm:active .tn-icon-right {
  transform: translateX(6rpx);
}

/* 个人介绍下拉框样式 */
.dropdown-wrapper {
  cursor: pointer;
  padding: 8rpx 0;
  border-radius: 32rpx;
  background: linear-gradient(145deg, #1a1a1a, #222);
  box-shadow: inset 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
  height: 108rpx; /* 确保高度固定 */
}

.intro-text {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  background: transparent;
  color: #e0e0e0;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-placeholder {
  color: #666;
}

.intro-tips {
  margin-top: 30rpx;
}

/* 添加随机介绍按钮样式 */
.random-intro-btn {
  color: #B3F73C;
  font-weight: 500;
  text-decoration: underline;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.random-intro-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 修改tip-item样式，使其可点击 */
.tip-item:last-child {
  cursor: pointer;
}

.tip-item:last-child .tn-icon-wand {
  color: #00C4FF;
  font-size: 30rpx;
}

/* 添加跳过确认提示样式 */
.skip-tip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8rpx);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.skip-tip-card {
  width: 85%;
  max-width: 650rpx;
  background: linear-gradient(145deg, #1a1a1a, #121212);
  border-radius: 28rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.5),
              0 0 0 2rpx rgba(179, 247, 60, 0.1);
  animation: bounceIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-tip-header {
  position: relative;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  background: #1a1a1a;
}

.skip-tip-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #e0e0e0;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  letter-spacing: 2rpx;
}

.skip-tip-close-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28rpx;
  transition: all 0.3s;
}

.skip-tip-close-btn:active {
  transform: translateY(-50%) scale(0.9);
  background: rgba(255, 255, 255, 0.2);
}

.skip-tip-content {
  padding: 40rpx;
}

.skip-tip-reward {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  background: linear-gradient(to right, rgba(179, 247, 60, 0.05), rgba(0, 196, 255, 0.05));
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: inset 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid rgba(179, 247, 60, 0.1);
}

.skip-tip-reward-circle {
  width: 100rpx;
  height: 100rpx;
  background: radial-gradient(circle at 30% 30%, #FFD700, #B8860B);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46rpx;
  color: #020303;
  margin-right: 24rpx;
  box-shadow: 0 8rpx 16rpx rgba(184, 134, 11, 0.4),
              0 0 0 2rpx rgba(255, 215, 0, 0.6);
  position: relative;
  flex-shrink: 0;
}

.skip-tip-reward-circle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 60%);
}

.skip-tip-reward-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.skip-tip-reward-label {
  font-size: 30rpx;
  color: #B3F73C;
  margin-bottom: 12rpx;
}

.skip-tip-reward-amount {
  font-size: 50rpx;
  font-weight: 700;
  color: #FFD700;
  text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.4);
}

.skip-tip-warning {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: rgba(255, 82, 82, 0.1);
  border-radius: 16rpx;
  border-left: 4rpx solid #FF5252;
  margin-bottom: 20rpx;
}

.skip-tip-warning .tn-icon-warning-fill {
  font-size: 36rpx;
  color: #FF5252;
  margin-right: 12rpx;
}

.skip-tip-warning text {
  font-size: 28rpx;
  color: #FF5252;
}

.skip-tip-actions {
  display: flex;
  border-top: 1rpx solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.skip-tip-btn {
  flex: 1;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  transition: all 0.3s;
  gap: 12rpx;
  position: relative; /* 确保可以相对定位内容 */
}

.skip-cancel {
  color: #888;
  background: #222222;
  border-right: 1rpx solid rgba(255, 255, 255, 0.05);
  position: relative;
  font-weight: normal;
  border-radius: 0 0 0 28rpx;
}

.skip-cancel:active {
  transform: translateY(2rpx);
  background: #2a2a2a;
}

.skip-confirm {
  color: #020303;
  background: linear-gradient(to right, #B3F73C, #00C4FF);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 16rpx rgba(179, 247, 60, 0.25);
  border-radius: 0 0 28rpx 0;
  font-weight: 600;
}

/* 添加光泽效果 */
.skip-confirm::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
  z-index: 1;
}

/* 确保文本和图标在动画上方 */
.skip-confirm text {
  position: relative;
  z-index: 2;
}

.skip-confirm:active {
  transform: translateY(4rpx);
  box-shadow: 0 4rpx 8rpx rgba(179, 247, 60, 0.2);
}

.skip-tip-actions .skip-confirm {
  animation: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50rpx); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 自定义tn-select样式 */
.custom-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #1a1a1a;
  border-bottom: 1rpx solid #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.header-cancel {
  font-size: 28rpx;
  color: #888888;
  padding: 10rpx;
}

.header-confirm {
  font-size: 28rpx;
  color: #B3F73C;
  padding: 10rpx;
}

/* 修改选择器样式 - 通过样式穿透 */
.tn-select :deep(.tn-select__content) {
  background-color: #1a1a1a !important;
}

.tn-select :deep(.tn-select__content__header) {
  background-color: #1a1a1a !important;
  border-bottom: 1rpx solid #333 !important;
}

.tn-select :deep(.tn-select__content__body) {
  background-color: #1a1a1a !important;
}

.tn-select :deep(.tn-select__content__body__item) {
  color: #e0e0e0 !important;
}

/* 搜索框样式 */
.search-box {
  padding: 20rpx 30rpx;
  background-color: #1a1a1a;
  border-bottom: 1rpx solid #333;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #222;
  border-radius: 40rpx;
  padding: 16rpx 24rpx;
  box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid #333;
}

.search-icon {
  font-size: 36rpx;
  color: #888;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #e0e0e0;
  background-color: transparent;
  padding: 0;
}

.search-placeholder {
  color: #666;
}

.clear-icon {
  font-size: 32rpx;
  color: #666;
  padding: 8rpx;
}

.friend-permission-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(145deg, #1a1a1a, #222);
  border: 2rpx solid #2a2a2a;
  border-radius: 28rpx;
  padding: 24rpx;
  margin-top: 16rpx;
}

.permission-option-desc {
  color: #e0e0e0;
  font-size: 28rpx;
}

.friend-permission-tips {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999999;
  margin-top: 16rpx;
  padding: 0 16rpx;
}

.friend-permission-tips .tn-icon-info-fill {
  color: #B3F73C;
  font-size: 28rpx;
  margin-right: 8rpx;
}

/* 微信输入框样式 */
.wechat-input {
  flex: 1;
  height: 100%; /* 使用100%高度填充父容器 */
  padding: 0 24rpx;
  background: transparent;
  color: #e0e0e0;
  font-size: 32rpx;
  display: flex;
  align-items: center; /* 垂直居中 */
  line-height: 1.2; /* 调整行高 */
}

.wechat-input .input-placeholder {
  color: #666;
}

/* 强制覆盖性别选择器文字颜色 */
.gender-option-improved {
  color: #e0e0e0 !important;
}
</style>
